<template>
    <div class="login-home">
        <div class="logo">
            <img src="../assets/太阳.png" alt="">
        </div>
        <div class="login-chose">
            <van-button plain class="blindman" type="primary">
                <template #icon>
                    <i class="iconfont icon-canjiren " style="margin-left: 15px;"></i>
                    <i class="iconfont icon-aixin" style="margin-left: 5px;"></i>
                </template>
                {{ button1Text }}
            </van-button>
            <van-button class="volunteer" type="primary">
                <template #icon>
                    <i class="iconfont icon-zhiyuanzhe"></i>
                </template>
                {{ button2Text }}

            </van-button>
        </div>

        <div class="footer">
            <router-link :to="registerLink" class="register-link">{{ linkText }}</router-link>
        </div>
    </div>

</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
    // 定义属性
    button1Text: {
        type: String,
        default: '我是用户,需要帮助'
    },
    button2Text: {
        type: String,
        default: '我是志愿者,提供帮助'
    },
    linkText: {
        type: String,
        default: '没有账号？立即注册'
    },
    registerLink: {
        type: String,
        default: '/register-home'
    }
})
</script>

<style lang="less" scoped>
.login-home {
    width: 100vw;
    height: 100vh;
    background: #F5F5F5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 21.4rem 2.4rem;
    box-sizing: border-box;

    .logo {
        width: 130px;
        height: 130px;
        margin-bottom: 64px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .login-chose {

        .blindman {
            width: 32.7rem;
            height: 12rem;
            background: #2A5C8D;
            border-radius: 12px 12px 12px 12px;
            font-family: Roboto, Roboto;
            font-weight: 400;
            font-size: 2.4rem;
            color: #FFFFFF;
            line-height: 3.2rem;
            text-align: center;
            border: none;
            display: flex;
            align-items: center;
            margin-bottom: 4rem;

            :deep(.van-button__content) {
                display: flex;
                align-items: center;
                justify-content: center;

                width: 100%; // 新增宽度限制
            }

            :deep(.van-button__text) {
                //margin-left: 1.6rem;

                flex: 1;
                min-width: 0;
                text-align: center;
                word-break: keep-all; // 保持词语完整
                max-width: 65%; // 限制最大宽度
                margin-left: auto; // 自动左间距
                margin-right: auto; // 自动右间距
            }


            .icon-canjiren {
                font-size: 3rem;
                color: #FFFFFF;
            }

            .icon-aixin {
                font-size: 2.4rem;
                color: #FFFFFF;
            }
        }

        .volunteer {
            width: 32.7rem;
            height: 12rem;
            background: #4CAF50;
            border-radius: 12px 12px 12px 12px;
            font-family: Roboto, Roboto;
            font-weight: 400;
            font-size: 2.4rem;
            color: #FFFFFF;
            line-height: 3.2rem;
            text-align: center;
            font-style: normal;
            text-transform: none;
            border: none;
            flex-wrap: nowrap;


            display: flex;
            align-items: center;

            :deep(.van-button__content) {
                display: flex;
                align-items: center;
                justify-content: center;

                width: 100%;
            }

            :deep(.van-button__icon) {
                margin-left: 1.9rem;
            }

            :deep(.van-button__text) {
                // margin-left: 1.5rem;

                flex: 1;
                min-width: 0;
                text-align: center;
                word-break: keep-all; // 保持词语完整
                max-width: 80%; // 限制最大宽度
                margin-left: auto; // 自动左间距
                margin-right: auto; // 自动右间距
            }

            .icon-zhiyuanzhe {
                width: 3.4rem;
                height: 3.4rem;
                color: #FFFFFF;
            }


        }
    }

    .footer {
        width: 16.2rem;
        // height: 2.8rem;
        margin-bottom: 4.8rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        flex: 0 0 100px;

        .register-link {
            font-family: Roboto, Roboto;
            font-weight: 400;
            font-size: 18px;
            color: #2A5C8D;
            line-height: 2.8rem;
            // display: block;
            // text-align: left;
            text-align: center;
            font-style: normal;
            text-decoration-line: underline;
            text-transform: none;
        }
    }
}
</style>